import 'antd/dist/reset.css';
import { useEffect, useState } from 'react';
import { ConfigType, PageType } from './type/type';
import Camera from './views/Camera';
import Setting from './views/Setting';
import {
  SettingOutlined,CameraOutlined,RadiusSettingOutlined
} from '@ant-design/icons';
import useConfig from './composables/useConfig';
const {config,setConfig} = useConfig();
const App: React.FC = () => {

  const [page,setPage] = useState<PageType>(PageType.SETTING);
  const [device,setDeviceConfig] = useState<ConfigType>(config);

  useEffect(()=>{
      // console.log("updateDeviceId",deviceId)
  },[device])

  const changePage = (page:PageType)=>{
    // console.log(page)
    setPage(page);
  }
  useEffect(()=>{
    initDeviceId();

  },[])
  const initDeviceId = ()=>{


    setDeviceConfig(config);
  }
  const setDevice = (options:ConfigType)=>{
    setConfig(options)
    setDeviceConfig(options);
  }

  const quit = () => {
    // console.log("111111111");
    (window as any).api.quit();
  }

  const [isRadius,setRadius] = useState<boolean>(false);
  return (
    <main style={{height:"100vh",position:"relative"}} className="group" onContextMenu={()=>{quit()}}>
      <section>
      {
        device.page===PageType.SETTING?
        <CameraOutlined onClick={()=>{setDevice({...device,page:PageType.CAMERA})}} style={{position:"absolute",left:"50%",transform:"translateX(-50%) translateY(16px)",fontSize:"1.5rem",cursor:"pointer",zIndex:"2",color:"white" }} className="group-hover"/>:
        (
          <>
            <SettingOutlined onClick={()=>{setDevice({...device,page:PageType.SETTING})}} color="white" style={{position:"absolute",left:"50%",transform:"translateX(-50%) translateY(1rem)",fontSize:"1.5rem",cursor:"pointer",zIndex:"2",color:"white"}} className="group-hover"/>
            <RadiusSettingOutlined onClick={()=>{setDevice({...device,isRadius:!device.isRadius})}} style={{position:"absolute",left:"50%",bottom:"0",transform:"translateX(-50%) translateY(-1rem)",fontSize:"1.5rem",cursor:"pointer",zIndex:"2",color:"white"}} className="group-hover" />
          </>
        )
      }
      </section>
      <section>
        {
        device.page===PageType.SETTING?
          <Setting config={device} changeConfig={(config)=>{setDevice(config)}} ></Setting>:
          <Camera config={device} changeConfig={(config)=>{setDevice(config)}} ></Camera>
        }
      </section>
      
    </main>
  );
};

export default App;
